<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Fetch：下载进度</title>
	</head>
	<body>
		<script>

			// fetch 方法允许去跟踪 下载 进度。但无法跟踪上传进度，如需上传进度，可以使用 XMLHttpRequest 对象。
			// 要跟踪下载进度，我们可以使用 response.body 属性。它是 ReadableStream(可读流) 对象的实例，它可以逐块(chunk) 提供body。
			// 与 response.text()，response.json() 和其他方法不同，response.body 给予了对进度读取的完全控制，我们可以随时计算下载了多少。

			// 注：上传的话可以先在客户端拆解文件，然后分片上传。这样就可以得到每个分片的上传进度。

			// *********************************************************
			// 读取下载进度示例代码：
			// 代替 response.json() 以及其他方法
			const reader = response.body.getReader()

			// 在 body 下载时，一直为无限循环
			while (true) {
				// 当最后一块下载完成时，done 值为 true
				// value 是块字节的 Uint8Array
				const { done, value } = await reader.read()

				if (done) {
					break
				}

				console.log(`Received ${value.length} bytes`)
			}
			// *********************************************************

			// 在读取数据之前，我们可以从 Content-Length header 中得到完整的响应长度。
			// 跨源请求中可能不存在这个 header（请参见 Fetch：跨源请求），并且从技术上讲，服务器可以不设置它。但是通常情况下它都会在那里。
		</script>
	</body>
</html>
